<template>
  <el-main class="im-chat-main" id="chatScrollBox" @scroll="onScroll">
    <div class="im-chat-box">
      <div v-for="(msgInfo, idx) in showMessages" :key="showMinIdx + idx">
        <ChatMessageItem
          @call="onCall(msgInfo.type)"
          :mine="msgInfo.sendId == mine.id"
          :headImage="headImage(msgInfo)"
          :showName="showName(msgInfo)"
          :msgInfo="msgInfo"
          :groupMembers="groupMembers"
          @delete="deleteMessage"
          @recall="recallMessage"
        />
      </div>
    </div>
  </el-main>
  <div v-if="!isInBottom" class="scroll-to-bottom" @click="scrollToBottom">
    {{ newMessageSize > 0 ? newMessageSize + "条新消息" : "回到底部" }}
  </div>
</template>

<script setup lang="ts">
import { MESSAGE_TYPE } from "@/types/enums";
const props = defineProps({
  isInBottom: Boolean,
  newMessageSize: { type: Number, default: 0 },
  mine: { type: Object, default: {} } as any,
  chat: Object as any,
  groupMembers: Array as any,
});
const emits = defineEmits(["setMessageData", "showPrivateVideo"]);
const showMinIdx = ref(0);
watch(
  () => props.chat,
  () => {
    let size = props.chat.messages.length;
    showMinIdx.value = size > 30 ? size - 30 : 0;
  }
);
const showMessages = computed(() => {
  return (
    props.chat &&
    props.chat.messages &&
    props.chat.messages.slice(showMinIdx.value)
  );
});
const isGroup = computed(() => {
  return props.chat.type == "GROUP";
});
function onCall(type: number) {
  if (type == MESSAGE_TYPE.ACT_RT_VOICE) {
    emits("setMessageData", "voice");
  } else if (type == MESSAGE_TYPE.ACT_RT_VIDEO) {
    emits("setMessageData", "video");
  }
}
function headImage(msgInfo: any) {
  if (isGroup.value) {
    let member = props.groupMembers.find((m) => m.userId == msgInfo.sendId);
    return member ? member.headImage : "";
  } else {
    return msgInfo.sendId == props.mine.id
      ? props.mine.headImageThumb
      : props.chat.headImage;
  }
}
function showName(msgInfo: any) {
  if (!msgInfo) {
    return "";
  }
  if (isGroup.value) {
    let member = props.groupMembers.find(
      (m: any) => m.userId == msgInfo.sendId
    );
    return member ? member.showNickName : msgInfo.sendNickName || "";
  } else {
    return msgInfo.selfSend ? props.mine.nickName : props.chat.showName;
  }
}
function deleteMessage(msgInfo: any) {
  ElMessageBox.prompt("确认删除消息?", "删除消息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // this.chatStore.deleteMessage(msgInfo, this.chat);
  });
}
function recallMessage(msgInfo: any) {
  ElMessageBox.prompt("确认撤回消息?", "撤回消息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    // let url = `/message/${this.chat.type.toLowerCase()}/recall/${msgInfo.id}`
    // this.$http({
    // 	url: url,
    // 	method: 'delete'
    // }).then((m) => {
    // 	this.$message.success("消息已撤回");
    // 	m.selfSend = true;
    // 	this.chatStore.recallMessage(m, this.chat);
    // })
  });
}
function onScroll(e: any) {
  let scrollElement = e.target;
  let scrollTop = scrollElement.scrollTop;
  if (scrollTop < 30) {
    // 在顶部,不滚动的情况
    // 多展示20条信息
    showMinIdx.value = showMinIdx.value > 20 ? showMinIdx.value - 20 : 0;
    let isInBottom = false;
    emits("setMessageData", {
      isInBottom,
      showMinIdx,
    });
  }
  // 滚到底部
  if (
    scrollTop + scrollElement.clientHeight >=
    scrollElement.scrollHeight - 30
  ) {
    let isInBottom = true;
    let newMessageSize = 0;
    emits("setMessageData", {
      isInBottom,
      showMinIdx: showMinIdx.value,
      newMessageSize,
    });
  }
}
function scrollToBottom() {
  nextTick(() => {
    let div = document.getElementById("chatScrollBox");
    if (div) {
      div.scrollTop = div.scrollHeight;
    }
  });
}
defineExpose({
  scrollToBottom,
});
</script>

<style lang="scss" scoped>
.im-chat-main {
  padding: 0;
  background-color: #fff;

  .im-chat-box {
    > ul {
      padding: 0 20px;

      li {
        list-style-type: none;
      }
    }
  }
}

.scroll-to-bottom {
  text-align: right;
  position: absolute;
  right: 20px;
  bottom: 230px;
  color: var(--im-color-primary);
  font-size: var(--im-font-size);
  font-weight: 600;
  background: #eee;
  padding: 5px 15px;
  border-radius: 15px;
  cursor: pointer;
  z-index: 99;
  box-shadow: var(--im-box-shadow-light);
}
</style>
